<template>
  <!-- 新手大礼包 -->
  <div style="position:relative;margin-top:25%;">
    <div class="bag_top">
      <img src="../../../images/background_top.png" alt="" width="38%">
    </div>
    <!-- @click="nextPage" -->
    <div class="new_user_bag" >
      <div v-show="!instructions">
        <div class="title">
          新手大礼包
        </div>
        <div style="height: 18rem;">
          <swipe :auto="0" :continuous="false">
            <swipe-item>
              <div style="width: 80%;margin: auto;">
                <ul class="shovel">
                  <li v-for="(item,index) in gameProps.propNum" :key="index" @click="game(gameProps.propId)"><div></div></li>
                </ul>
                <div class="sub-title">
                  <h2>三把铲子</h2>
                  <p>
                    点击其中任意一把铲子，开始“挖宝”游戏。
                    游戏随机挖出电子券、芸券、铲子，也可能
                    什么都挖不到。
                  </p>
                </div>
              </div>
            </swipe-item>
            <swipe-item>
              <div class="">
                <coupon :coupons="coupons"></coupon>
                <div id="coupon_shadow" class="coupon_shadow"></div>
                <div class="sub-title">
                  <h2>电子券一张</h2>
                  <p></p>
                  <p>有效期{{coupons[0].validatyBegin,1 | strDate}}至{{coupons[0].validatyEnd,1 | strDate}}</p>
                  <p v-if="coupons[0].disableDate">{{coupons[0].disableDate,1 | businessDay}}不可用</p>
                </div>
              </div>
            </swipe-item>
            <swipe-item>
              <div>
                <div class="yunMoney">
                  <img src="../../../images/100.png" alt="" width="42%">
                  <p>枚芸券</p>
                </div>
                <div class="sub-title">
                  <h2></h2>
                  <p style="margin: 1.2rem 0;">可在“个人中心” - “芸券”查看</p>
                </div>
              </div>
            </swipe-item>
          </swipe>
        </div>
        <div class="gift_rule" @click="showInstructions">
        <p>挖宝游戏说明：<i class="icon iconfont icon-right"></i></p>
      </div>
      </div>
        <div v-show="instructions">
          <p class="title">游戏说明<i @click="isBack" class="iconfont icon-shanchu"></i></p>
          <p class="instructions">使用每把铲子，在挖宝游戏中挖草时会随机产生四种宝贝！还是熟悉的神秘味道，心若在，梦就在！如果你也想体验一下这神奇的挖宝过程，赶紧快来试试你的运（ren）气（pin）吧！
            注：新手大礼包内置挖宝游戏。</p>
        </div>
    </div>
  </div>
</template>

<script>
import Coupon from './coupon.vue'
import { Swipe, SwipeItem } from 'mint-ui';
export default {
  name: 'bag',
  components: {
    Coupon,
    Swipe,
    SwipeItem
  },
  data: () => ({
    giftBags: {
      gameProps: true,
      coupon: false,
      yun: false,
    },
      instructions:false,//游戏说明
  }),
  props: {
    gameProps: [Object],
    coupons: [Array],
    yun: [Number, String]
  },
  methods: {
    game(id) { // 进入游戏页面
      this.$router.push({
        name: 'game',
        params: {id}
      });
    },
    isBack(){//隐藏游戏说明
        this.instructions=false;
    },
    showInstructions(){//显示游戏说明
        this.instructions=true;
    },
    nextPage(type) {
      console.log(type);
      Object.keys(this.giftBags).forEach(item => {
        this.giftBags[item] = false
      })
      this.giftBags[type] = true
    }
  }
}
</script>
<style>
  .mint-swipe-indicator.is-active {
    opacity: 1;
  }
</style>
<style lang="scss" scoped>
.bag_top {
  text-align: center;
}
.new_user_bag {
  background-image: url(../../../images/background.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 1rem;
  border-radius: 0.3rem;
  min-height: 25rem;
  .title {
    margin:0.5rem 0 1rem 0;
    font-size: 1.4rem;
    color: #fff;
    text-align: center;
    i{
      float:right;
    }
  }
  .sub-title {
    font-size: 1rem;
    line-height: 1.2rem;
    color: #fff;
    text-align: center;
    margin-top: 2rem;
    // margin-bottom: 4rem;
    h2 {
      margin: 1rem 0;
    }
    p {
      font-size: 1rem;
      line-height: 1.6rem;
    }
  }
  .instructions{
    font-size: 1rem;
    line-height: 1.8rem;
    color: #fff;
    text-align: left;
    margin-top: 4rem;
  }
  ul.shovel {
    padding: 0.9rem 0;
    > li {
      float: left;
      width: 30%;
      position: relative;
      &:first-child {
        margin-right: 2.5%;
      }
      &:nth-child(2) {
        margin: 0 2.5%;
      }
      &:last-child {
        margin-left: 2.5%;
      }
      > div {
        background-color: rgba(255,255,255,0.2);
        border: 1px solid rgba(255,255,255,0.2);
        padding-bottom: 100%;
        margin: auto;
        width: 100%;
        border-radius: 0.3rem;
        &:after {
          content: '';
          display: block;
          position: absolute;
          width: 80%;
          height: 80%;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          background-image: url(../../../images/shovel.png);
          background-repeat: no-repeat;
          background-size: contain;
        }
      }
    }
    &:after {
      content: "";
      display:block;
      clear: both;
    }
  }
  .gift-main {
    padding: 0.5rem 0;
    border-bottom: 1px dotted #ccc;
    > div {
      float: left;
      border: 1px solid #e8e8e8;
      border-radius: 0.3rem;
      height: 5rem;
      box-sizing: border-box;
    }
    &:after{
      content: '';
      display: block;
      clear: both;
    }
  }
}
// .spot_wrp {
//   width: 100%;
//   position: relative;
//   margin-bottom: 5rem;
// }
// ul.spot {
//   position: absolute;
//   left: 50%;
//   transform: translate(-50%, 0);
//   margin: 1rem auto 0;
//   overflow: hidden;
//   display: inline-block;
//   li {
//     float: left;
//     width: 8px;
//     height: 8px;
//     border-radius: 50%;
//     background-color: #bd4c6e;
//     margin: 0 0.2rem;
//   }
//   li.active {
//     background-color: #fff;
//   }
// }
.gift_rule {
  background-image: url(../../../images/backgroud_bottom.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  right: 0;
  height: 3rem;
  line-height: 3rem;
  padding: 0 1rem;
  bottom: 0;
  color: #333;
  p {
    i{
      float:right;
    }
  }
}
.coupon_shadow {
  display: block;
  content: '';
  width: 100%;
  height: 1rem;
  border-top-left-radius: 8rem 0.7rem;
  border-top-right-radius: 8rem 0.7rem;
  border-bottom-right-radius: 8rem 0.7rem;
  border-bottom-left-radius: 8rem 0.7rem;
  box-shadow: 0 0.7rem 0.7rem rgba(0,0,0,0.5);
  margin-top: -1rem;
  position: relative;
  z-index: 100;
}
.yunMoney {
  text-align: center;
  position: relative;
  font-size: 1.4rem;
  color: #fff;
  > p {
    position: absolute;
    width: 100%;
    // bottom: -0.8rem;
  }
}
</style>
